<template>
    <div>
<!--        面包屑导航区-->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>用户管理</el-breadcrumb-item>
            <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>

<!--        卡片视图区域-->
        <el-card >
<!--           搜素与添加-->

            <el-row :gutter="20">
                <el-col :span="9">
                    <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="getUserList">
                        <el-button slot="append" icon="el-icon-search" @click="getUserList"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary" @click="addDialogVisible=true">添加用户</el-button>
                </el-col>
            </el-row>

<!--  用户列表区-->
            <el-table :data="userlist" border stripe>
<!--                加一个索引列-->
                <el-table-column type="index" label="*"></el-table-column>
                <el-table-column label="姓名" prop="username"></el-table-column>
                <el-table-column label="邮箱" prop="email"></el-table-column>
                <el-table-column label="电话" prop="mobile"></el-table-column>
                <el-table-column label="角色" prop="rootname"></el-table-column>
                <el-table-column label="状态">
<!--                    作用域插槽-->
                    <template slot-scope="scope">
                        <el-switch
                                v-model="scope.row.mg_state" @change="userStateChanged(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="180px" >
                    <template slot-scope="scope">
<!--                        修改-->
                        <el-button type="primary" icon="el-icon-edit" size="mini" @click="showEditDialog(scope.row.id)"></el-button>
<!--                        删除-->
                        <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeUserById(scope.row.id)"></el-button>
<!--                        分配角色-->
                        <el-tooltip  effect="dark" content="分配角色" placement="top" :enterable="false">
                            <el-button type="warning" icon="el-icon-setting" size="mini"></el-button>
                        </el-tooltip>

                    </template>
                </el-table-column>

            </el-table>
<!--            分页区-->
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[1,2,5,10]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="toatl">
            </el-pagination>
        </el-card>
<!--这是添加用户的对话框-->
        <el-dialog
                title="添加用户"
                :visible.sync="addDialogVisible"
                width="50%" @close="addDialogClosed">
<!--            内容主体区-->
            <el-form :model="addForm" :rules="addFormRules" ref="addFormRef" label-width="70px" >
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="addForm.username"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="password">
                    <el-input v-model="addForm.password"></el-input>
                </el-form-item>

                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="addForm.email"></el-input>
                </el-form-item>

                <el-form-item label="手机" prop="mobile">
                    <el-input v-model="addForm.mobile"></el-input>
                </el-form-item>
            </el-form>
<!--            对话框底部按钮区-->
            <span slot="footer" class="dialog-footer">
            <el-button @click="addDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="addUser">确 定</el-button>
          </span>
        </el-dialog>

<!--        修改用户的对话框-->
        <el-dialog
                title="修改用户"
                :visible.sync="editDialogVisible"
                width="50%" @close="editDialogClosed">
            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
                <el-form-item label="用户名" >
                    <el-input v-model="editForm.username" disabled></el-input>
                </el-form-item>
            </el-form>

            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
                <el-form-item label="邮箱" prop="email">
                    <el-input v-model="editForm.email" ></el-input>
                </el-form-item>
            </el-form>

            <el-form :model="editForm" :rules="editFormRules" ref="editFormRef" label-width="70px">
                <el-form-item label="手机号"prop="mobile" >
                    <el-input v-model="editForm.mobile" ></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="editDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUserInfo">确 定</el-button>
  </span>
        </el-dialog>

    </div>

</template>

<script>
 export default {
     data() {

         //验证邮箱定义自定义的规则
         var checkEmail = (rule,value,cb)=>{
             //验证邮箱的正则表达式
             const regEmail = /^([a-zA-z0-9_-])+@([a-zA-z0-9_-])+(\.[a-zA-z0-9_-])+/

             if(regEmail.test(value)){
                 //这是合法邮箱
                 return cb()
             }

             cb(new Error('请输入合法的邮箱'))
         }
         //验证手机号定义自定义的规则
         var checkMobile = (rule,value,cb)=>{
             //验证手机号的正则表达式
             const regMobile = /^(0|86|17951)?(13[0-9]|15[0123456789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

             if(regMobile.test(value)){
                 //这是合法手机号
                 return cb()
             }
             cb(new Error('请输入合法手机号'))
         }
         return {
             //获取用户列表的阿参数对象
             queryInfo:{
                 query:'',
                 //当前页数
                 pagenum:1,
                 //当前每页显示多少条数据
                 pagesize:2
             },
         userlist:[{
             email: '1549610885@qq.com',
             username: '王小虎',
             mobile: 13201269929,
             rootname:'测试员1',
             mg_state:true,
             id:'1'
         },

             {
                 email: '1549610885@qq.com',
                 username: '王大虎',
                 mobile: 13201269929,
                 rootname:'测试员2',
                 mg_state:false,
                 id:'2'
             }
         ],
             toatl:3,
             //控制用户添加对话框的显示与隐藏
             addDialogVisible:false,
             //添加用户的表单数据
             addForm:{
                 username:'',
                 password:'',
                 email:'',
                 mobile:''
             },
             //添加表单的验证规则对象
             addFormRules:{
                 username:[
                     {required:true,message:'请输入用户名',trigger: 'blur'},{min:3,max:10,
                         message: '用户名的长度在3~10个字符之间',trigger:'blur'}
                 ],
                 password:[
                     {required:true,message:'请输入密码',trigger: 'blur'}
                 ],
                 email:[
                     {required:true,message:'请输入邮箱',trigger: 'blur'},{validator: checkEmail,trigger:'blur'}
                 ],
                 mobile:[
                     {required:true,message:'请输入电话',trigger: 'blur'},{validator: checkMobile,trigger:'blur'}
                 ],
             },
             //这是控制用户修改对话框的显示与隐藏
             editDialogVisible:false,
             //查询到的用户信息对象
             editForm:{},
            //修改表单验证的规则对象
             editFormRules:{
                 email:[
                     {required:true,message:'请输入用户邮箱',trigger: 'blur'},{validator: checkEmail,trigger:'blur'}
                 ],
                 mobile:[
                     {required:true,message:'请输入用户电话',trigger: 'blur'},{validator: checkMobile,trigger:'blur'}
                 ]
             }
         }
     },
     //生命周期函数
     created() {
         this.getUserList()
     },
     methods:{
         async getUserList(){
            const {data:res} = await this.$http.get('users',{params:this.queryInfo})
             if(res.meta.sattus !== 200){return this.$message.error('获取失败')}
             this.userlist = res.data.users
             this.total = res.data.total
         },
         //监听pagesize改变的事件
         handleSizeChange(newSize){
             this.queryInfo.pagesize=newSize;
             this.getUserList();
         },
         //监听页码值改变的事件
         handleCurrentChange(newPage){
             this.queryInfo.pagenum=newPage;
             this.getUserList();
         },
         //监听用户当前信息
         async userStateChanged(userinfo){
             console.log(userinfo)
              const {data:res} = await this.$http.put(`user/${userinfo.id}/state/${userinfo.mg_state}`)
             if(res.meta.status!==200){
                 userinfo.mg_state=!userinfo.mg_state;
                 return  this.$message.error("更新用户状态失败");
             }
             this.$message.success("更新用户状态成功")
         },
         //监听添加用户对话框的关闭事件(表单的重置)
         addDialogClosed(){
             this.$refs.addFormRef.resetFields()
         },
         //点击按钮添加新用户
         addUser(){
             //表单预校验
             this.$refs.addFormRef.validate(async valid=>{
                 if(!valid)return
                 //可以发起添加用户的网络请求
              const {data:res} = await this.$http.post('users',this.addForm)

                 if(res.meta.status !==201){
                     this.$message.error('添加用户失败')
                 }
                 this.$message.success('添加用户成功')
                 //隐藏添加用户的对话框
                 this.addDialogVisible = false
                 //刷新列表
                 this.getUserList()
             })
         },
         //展示编辑用户的对话框
         async showEditDialog(id){
             const {date:res} = await this.$http.get('users/'+ id)
             if(res.meta.status !==200)
             {
                 return this.$message.error('查询用户信息失败')
             }
            this.editForm = res.data
            this.editDialogVisible=true

         },
            //这是监听修改用户对话框的修改事件
         editDialogClosed(){
             this.$refs.editFormRef.resetFields()
         },
         //修改用户信息并提交
         editUserInfo(){
             //先进行表单的预验证
             this.$refs.editFormRef.validate(async valid=>{
                 if(!valid){
                     return
                 }
                 //发起修改用户的数据请求
                 const {data:res} = await this.$http.put('users/' +this.editForm.id,{email:this.editForm.email,mobile:this.editForm.mobile})

                 if(res.meta.status!==200){
                     return this.$message.error('更新用户信息失败')
                 }
                 //关闭对话框
                 this.editDialogVisible=false
                 //刷新数据列表
                 this.getUserList()
                 //提示修改成功
                 this.$message.success('更新用户信息成功')
             })
         },
         //根据id删除对应的用户信息
         async removeUserById(id){
             //弹框询问用户是否删除数据
            const confirmResult = await this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
                 confirmButtonText: '确定',
                 cancelButtonText: '取消',
                 type: 'warning'
             }).catch(err =>{
                 return err
            })
             //如果用户确认删除，则返回值为字符串 confirm
             //如果用户取消删除，则返回值为字符串 cancel
             if(confirmResult!=='confirm'){
                 return this.$message.info('已经取消了删除')
             }

           const {data:res} =  await this.$http.delete('user/'+id)
             if(res.meta.status !==200){
                 return this.$message.error('删除失败')
             }

             this.$message.success('删除成功')
             this.getUserList()
         }

     }
 }

</script>

<style lang="less" scoped>

</style>
